<template>
	<view class="myMaintenance">
		<view class="myMaintenance-back"></view>
		<view class="myMaintenance-content">
			<view class="content-top">
				<view class="top-button" tabindex="1"  :style="{ borderBottom:borderStyle}" @click="clickAfoot">进行中</view>
				<view class="top-button" tabindex="2" @click="clickFinish">已完成</view>
			</view>
			<view class="content-middle">
				<view class="middle-left">
					<text class="middle-left-text">维修方式：</text>
					<picker mode="selector" :range="list" @change="onChange" class="select-picker">
						<view class="picker">
							{{selectedValue}}
							<view class="picker-vi">
								<image src="/static/my/_下拉箭头小.png" class="picker-pic"></image>
							</view>
						</view>
					</picker>
				</view>
				<view class="middle-right">
					<picker mode="date" :value="date" start="2023-01-01" end="2023-12-31"
						bindchange="bindDateChange">
						<view>预约日期</view>
					</picker>
				</view>
			</view>
			<view class="content-content" >
				 <view v-for="(item, index) in repairList" :key="index" class="repair-item" @click="toRepairOrder">
					<view class="repair-number">维修单号：{{ item.repairNumber }}</view>
					<view class="repair-type">维修方式：{{ item.repairType }}</view>
					<view class="repair-date">预约日期：{{ item.appointmentDate }}</view>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				list: ['全部','到店维修', '上门服务'],
				selectedValue: '全部',
				borderStyle:'5rpx solid #fff',
				date:"",  //预约的时间
				repairList: [
					 {
					    "repairNumber": "3535252",
					    "repairType": "到店维修",
					    "appointmentDate": "2022/11/10 11:00"
					  },
					  {
					    "repairNumber": "3535252",
					    "repairType": "上门取车",
					    "appointmentDate": "2022/11/10 11:00"
					  },
					  {
					    "repairNumber": "3535252",
					    "repairType": "到店维修",
					    "appointmentDate": "2022/11/10 11:00"
					  }
				]
			}
		},
		methods: {
			clickAfoot(){
				this.borderStyle='5rpx solid #fff'
				
			},
			clickFinish(){
				this.borderStyle='5rpx solid transparent'
				
			},
			onChange(e) {
				this.selectedValue = this.list[e.detail.value];
			},
			bindDateChange(e) {
				this.date = e.detail.value;
			},
			toRepairOrder(){
				uni.navigateTo({
					url:"/pages/my/repairOrder/repairOrder"
				})
			}


		}
	}
</script>

<style>
	.myMaintenance {
		position: relative;
		background-color: #F7F7F7;
	}

	.myMaintenance-back {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #297BF6;
		height: 320rpx;
		color: aliceblue;
	}

	.myMaintenance-content {
		position: absolute;
		width: 96%;
		top: 30rpx;
		left: 20rpx;
		margin: 0 auto;
		
		
	}

	.content-top {
		display: flex;
		justify-content: center;
	}

	.top-button {
		padding: 20rpx 20rpx;
		color: #fff;
		margin-right: 30rpx;
	}

	.top-button:focus {
		border-bottom: #fff solid 5rpx;

	}
	.content-middle{
		margin: 10rpx 0rpx;
		padding: 10rpx;
		border-radius: 25rpx;
		background-color: #fff;
		height: 100rpx;
	}

	.middle-left {
		float: left;
		width: 400rpx;
		padding-top: 30rpx;
		font-size: 28rpx;
	}

	.middle-left-text {
		margin-top: 10rpx;
		margin-left: 30rpx;
		float: left;
	}
	
	.picker-vi {
		margin-left: 10rpx;
		float: right;
	}

	.picker-pic {
		width: 30rpx;
		height: 30rpx;
	}

	.picker {
		float: left;
		padding: 10px;
		background-color: #fff;
		text-align: center;
		height: 20rpx;
		line-height: 20rpx;
		background-color: #297BF6;
		border-radius: 25rpx;
		color: #fff;
	}

	.middle-right {
		margin-top: 20rpx;
		float: right;
		padding: 10px;
		
	}
	.content-content{
		margin: 30rpx 0rpx;
		padding: 10rpx;
		border-radius: 25rpx;
	}
	
	.repair-item {
	  margin-bottom: 15px;
	  padding: 10px;
	 background-color: #fff;
	  border-radius: 5px;
	}
	.repair-number,
	.repair-type,
	.repair-date {
	  margin: 20rpx 0;
	}
</style>